<template>
  <div class="course">
    <div class="course__start-time">00:00</div>
    <div class="course__progress" ref="progress">
      <div class="course__progress-bg" ref="progressBg">
        <div class="course__progress-bar" ref="progressBar"></div>
      </div>
      <div class="course__progress-btn" ref="progressBtn"></div>
    </div>
    <div class="course__end-time">04:32</div>
  </div>
</template>
<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'
  import {Greeter} from '../../module/Greeter'
  @Component
  export default class PlaySongCourse extends Vue {

    private mounted(){
      new Greeter(this.$refs).init()
    }
  }
</script>

<style lang="scss">
  @include component(course){
    display: flex;
    align-items: center;
    justify-content: space-between;

    @include part(start-time){
      font-size: $font-size-0625;
      margin-right: 5px;
    }

    @include part(end-time){
      font-size: $font-size-0625;
      margin-left: 5px;
    }

    @include part(progress){
      position: relative;
      width:100px;
      cursor: pointer;
     }

    @include part(progress-bg){
      width: 100%;
      height: 2px;
      border-radius: 2px;
      overflow: hidden;
      background-color:#a9acb1;

    }

    @include part(progress-bar){
      background: orangered;
      width: 0px;
      height: 2px;
      border-radius: 2px;

    }

    @include part(progress-btn){
      width: 10px;
      height: 10px;
      border-radius: 10px;
      position: absolute;
      background:#fff;
      left: 0px;
      top:-5px;
      cursor: pointer;
      border:1px #ddd solid;
      box-sizing:border-box;

      &:hover{
        background: #054547;
      }
    }


  }
</style>
